<template>
	<view class="content">
		
		<view class="box width90" v-for="(item,index) in MsgData" :key="index" @tap="thisMsg(item.id,item.title)">
			<view class="time fontSize12 textCenter">{{item.time}}</view>
			<view class="topBox">
				<view class="title fontSize14">{{item.title}}</view>
				<view class="redIcon" v-if="item.showRed"></view>
			</view>
			<view class="clearBoth"></view>
			<!-- <view class="contents overflow_two fontSize12">{{item.contents}}</view> -->
			<view class="contents overflow_two fontSize12" v-html="item.contents"></view>
			<view class="footerBox">
				<view class="seeMore fontSize12">查看详情</view>
				<uni-icons class="icon" type="arrowright"  color="rgb(204,204,204)" size="12"/>
				<view class="clearBoth"></view>
			</view>
		</view>
		
		
		

	</view>
</template>
<style>
	.content{min-height:100vh;background: rgb(245,245,249);padding-top:30upx;}
	.content .box{padding:4% 2.5%;margin:0 2.5%;margin-bottom:60upx;box-shadow: 10upx 20upx 10upx rgba(0,0,0,0.1);border-radius: 20upx;background:white;}
	.content .box .time{color:#BBBBBB;}
	.content .box .topBox{width:100%;position: relative;}
	.content .box .topBox .title{width:70%;font-weight: bold;float: left;}
	.content .box .topBox .redIcon{width:16upx;height:16upx;border-radius: 16upx;background: #DC582A;position: absolute;top:12upx;right:0;}
	.content .box .contents{margin:30upx 0;color:#333333}
	.content .box .footerBox{padding:30upx 0;padding-bottom: 0;border-top: 1px solid #F2F2F5;width:100%;}
	.content .box .footerBox .seeMore{float: left;color:#BBBBBB;}
	.content .box .footerBox .icon{float: right;}
</style>
<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components:{
			uniIcons,
		},
		data() {
			return {
				MsgData:[
					// {time:"上午10:00",title:"这是标题1",showRed:true,contents:"这是内容这是内容这是内容这是内容"},
					// {time:"上午10:00",title:"这是标题2",showRed:true,contents:"这是内容这是内容这是内容这是内容"},
					// {time:"上午10:00",title:"这是标题3",showRed:true,contents:"这是内容这是内容这是内容这是内容"},
				],
				pages:1,
			}
		},
		onShow(){
			this.MsgData = []
			this.AjaxLoad()
		},
		onReachBottom(){
			this.pages++;
			this.AjaxLoad()
		},
		methods: {
			AjaxLoad(e){
				var list = []
				let param={
					token:this._$userToken("userInfo").token,
					page:this.pages
				};
				this._$InitRequest.request('member_info/msg', param).then(res => {
					res.data.list.data.forEach((item)=>{
						var showRed = false
						if( item.is_read !== 1 )showRed = true
						list.push({
							id:item.id,
							time:item.create_time,
							title:item.title,
							showRed:showRed,
							contents:item.content,
						})
					})
					list.forEach((item)=>{
						this.MsgData.push(item)
					})
				},error=>{})
			},
			thisMsg(id,name){uni.navigateTo({url:"/pages_msg/pages/msgDetails/msgDetails?id=" + id + "&name=" + name})},
			
		}
	}
</script>